<template>
  <el-dialog
    class="eldialog"
    :visible.sync="visible"
    :title="title"
    :close-on-click-modal="false"
    append-to-body
    top="10vh"
    width="40%"
    :close-on-press-escape="false"
    :before-close="closeVisible"
  >
    <el-form ref="form" :model="queryForm" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="组工网统计分类">
            <el-select
              v-model="queryForm.classType"
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人员类型">
            <el-select
              v-model="queryForm.personType"
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option
                v-for="item in optionsType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="姓名">
        <el-input v-model="queryForm.personName"></el-input>
      </el-form-item>
      <el-form-item label="职务">
        <el-input v-model="queryForm.post"></el-input>
      </el-form-item>
      <el-form-item label="部门">
        <el-input v-model="queryForm.department"></el-input>
      </el-form-item>
      <el-form-item label="办公电话">
        <el-input v-model="queryForm.telphone"></el-input>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="queryForm.phone"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="queryForm.startDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="queryForm.endDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeVisible()">取 消</el-button>
      <el-button type="primary" @click="submitForm()">保 存</el-button>
    </span>
  </el-dialog>
</template>
  
<script>
import {
  getPersonSave,
  getPersonUpdate,
} from "@/api/datacentersg/personnelPut/personnelPut.js";
import store from "@/store";
export default {
  data() {
    return {
      visible: false,
      title: "",
      options: [
        {
          value:0,
          label: "大组工网网络安全管理人员配备情况",
        },
        {
          value: 1,
          label: "大组工网网站管理人员配备情况",
        },
        {
          value: 2,
          label: "省委组织部大组工网电子邮件系统管理人员配备情况",
        },
      ],
      optionsType: [
        {
          value: 0,
          label: "系统管理员",
        },
        {
          value: 1,
          label: "安全保密管理员",
        },
        {
          value: 2,
          label: "安全审计员",
        },
      ],
      queryForm: {
        classType: "",
        personType: "",
        personName: "",
        post: "",
        department: "",
        telphone: "",
        phone: "",
        startDate: "",
        endDate: "",
      },
      updateId: "",
    };
  },
  methods: {
    personneInfo(title, personneRow) {
      this.visible = true;
      this.title = title;
      if (this.title == "编辑") {
        this.updateId = personneRow.id;
        this.queryForm.classType = personneRow.classType;
        this.queryForm.personType = personneRow.personType;
        this.queryForm.personName = personneRow.personName;
        this.queryForm.post = personneRow.post;
        this.queryForm.department = personneRow.department;
        this.queryForm.telphone = personneRow.telphone;
        this.queryForm.phone = personneRow.phone;
        this.queryForm.startDate = personneRow.startDate;
        this.queryForm.endDate = personneRow.endDate;
      }
    },

    submitForm() {
      if (this.title === "新增") {
        const params = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          data: {
            classType: this.queryForm.classType,
            personType: this.queryForm.personType,
            personName: this.queryForm.personName,
            post: this.queryForm.post,
            department: this.queryForm.department,
            telphone: this.queryForm.telphone,
            phone: this.queryForm.phone,
            startDate: this.queryForm.startDate,
            endDate: this.queryForm.endDate,
          },
        };
        getPersonSave(params).then((result) => {
          if (result.result) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.$emit("initData");
            this.closeVisible();
          }
        });
      } else if (this.title === "编辑") {
        const params = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          data: {
            id: this.updateId,
            classType: this.queryForm.classType, // 将文本值转换为数字值
            personType:this.queryForm.personType, // 将文本值转换为数字值
            personName: this.queryForm.personName,
            post: this.queryForm.post,
            department: this.queryForm.department,
            telphone: this.queryForm.telphone,
            phone: this.queryForm.phone,
            startDate: this.queryForm.startDate,
            endDate: this.queryForm.endDate,
          },
        };
        getPersonUpdate(params).then((result) => {
          if (result.result) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.$emit("initData");
            this.visible = false;
          }
        });
      }
      this.visible = false;
    },
    closeVisible() {
      this.visible = false;
      this.queryForm.classType = "";
      this.queryForm.personType = "";
      this.queryForm.personName = "";
      this.queryForm.post = "";
      this.queryForm.department = "";
      this.queryForm.telphone = "";
      this.queryForm.phone = "";
      this.queryForm.startDate = "";
      this.queryForm.endDate = "";
    },
  },
};
</script>
  